<%@include file="menu/util.jsp" %>
<%@page contentType="text/html; charset=iso-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <fmt:bundle basename="app">
        <head>

            <%@include file="menu/wizardTablessHeader.jsp" %>



            <link rel="stylesheet" href="jsp/css/colorpicker.css" type="text/css" />

            <script type="text/javascript">
                $.validator.setDefaults({
                    submitHandler: function() {
                        var name = $('#name').attr('value');
                        var description = $('#description').attr('value');
                        var priority= $('#priority').attr('value');
                        var color = $('#color').attr('value');

                        if($('#colId').attr('value') > 0){
                            var id = +$('#colId').attr('value');
                            editColorimetry(id,name,description,priority,color);
                        }else{
                            insertColorimetry(name,description,priority,color);
                        }
                        //        $('#newColorimetry').submit()

                    }
                });

                $().ready(function() {
                    // validate the comment form when it is submitted
                    $("#newColorimetry").validate({
                        errorLabelContainer: $(".errorDiv"),
                        wrapper: "li"
                    });
                    $("#colorimetryId").change(function(){
                        selectColorimetry($(this).val());
                    });
                    $("#priority").change(function(){
                        var priority = document.getElementById("priority");
                        var priorities = priority.form.priorityUsed;

                        for(i=0;priorities.length;i++)
                            if(''+priorities[i].value == priority.value+''){
                                priority.value = "";
                                break;
                            }
                                
                    });

                });

                function colorPicker(){

                    $('.colorPickerField').ColorPicker({

                        onSubmit: function(hsb, hex, rgb, el) {
                            $(el).parent().children().filter('.squareColor').css('background-color', '#' + hex);
                            $(el).val(hex);
                            $(el).ColorPickerHide();
                        },
                        onBeforeShow: function () {
                            $(this).ColorPickerSetColor(this.value);
                        }
                    })
                    .bind('keyup', function(){
                        $(this).ColorPickerSetColor(this.value);
                    });

                    $('.colorpicker').css('z-idex', 9999999999999999);
                }

                function extrasColorimetry(maxNum){
                    colorPicker();
                    $('#maxNumber').attr('value', maxNum);

                }

                $(document).ready(function(){
                    // html = $('#colors').html();
                    // dinamicHtml.innerHtml = html;
                    colorPicker();
                    // addDinamicHtml(dinamicHtml)
                });



                var dinamicHtml = {
                    "classOnClick": "add",
                    "innerHtml": html,
                    "addBefore": true,
                    "firstId": 1,
                    "idInsertCode": "add",
                    "removeImagePath": "jsp/images/Remove.png",
                    "removeParent": "table",
                    "functions":   extrasColorimetry,
                    "idsToModify": [
                        {
                            "originalId": "colorName0",
                            "newId": "colorName"
                        },
                        {
                            "originalId": "colorDescription0",
                            "newId": "colorDescription"
                        },
                        {
                            "originalId": "colorpickerField0",
                            "newId": "colorpickerField"
                        },
                        {
                            "originalId": "icon0",
                            "newId": "icon"
                        },
                        {
                            "originalId": "squareColor0",
                            "newId": "squareColor"
                        }
                    ]
                };
            </script>


            <c:set var="name" value=""/>
            <c:set var="description" value=""/>
            <c:set var="priority" value=""/>
            <c:set var="color" value=""/>
            <c:set var="id" value="-1"/>

            <c:if test="${colorimetry != null}" >
                <c:set var="name" value="${colorimetry.name}"/>
                <c:set var="description" value="${colorimetry.description}"/>
                <c:set var="priority" value="${colorimetry.priority}"/>
                <c:set var="color" value="${colorimetry.color}"/>
                <c:set var="id" value="${colorimetry.idColorimetry}"/>
            </c:if>

        </head>

        <body style="overflow:hidden;" >
            <form id="newColorimetry" action="newColorimetry.do">
                <%@include file="menu/wizardTablessHeader2.jsp" %>
                <div id="colors">
                    <table  class="table">
                        <c:if test="${colorimetries != null && !empty colorimetries}">
                            <c:forEach var="colorimetryUsed" items="${colorimetries}">
                                <input type="hidden" name="priorityUsed" value="${colorimetryUsed.priority}" />
                            </c:forEach>
                        </c:if>
                        <c:if test="${notColorimetries != null && !empty notColorimetries}">
                            <tr>
                                <td>
                                    <fmt:message key="forms.similar" />
                                </td>
                                <td>
                                    <select name="colorimetryId" id="colorimetryId">

                                        <option value="-1"><fmt:message key="forms.selectoption" /></option>
                                        <c:forEach items="${notColorimetries}" var="colorimetry">
                                            <option value="${colorimetry.idColorimetry}">${colorimetry.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                            </tr>
                            <tr><td colspan="2"><br /><br /></td></tr>
                        </c:if>
                        <tr>
                            <td>
                                <fmt:message key="forms.color.name" />
                            </td>
                            <td>
                                <input class="required" title="<fmt:message key="error.colorimetry.name"/>" type="text" id="name" name="colorName" value="${name}" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fmt:message key="forms.color.description" />
                            </td>
                            <td>
                                <input class="required" title="<fmt:message key="error.colorimetry.description"/>" type="text" id="description" name="colorDescription" value="${description}" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fmt:message key="forms.color" />
                            </td>
                            <td>
                                <p>
                                    <input class="colorPickerField required" title="<fmt:message key="error.colorimetry.color"/>" type="text" maxlength="6" size="6" id="color" name="color" value="${color}" />
                                    <!--
                                    <img class="add"  id="icon0" src="jsp/images/Add.png" width="25" height="25" style="padding-left: 10px;display:block;float:right" alt="Add"  />
                                    -->
                                    <span class="squareColor" id="squareColor" style="display:block;width:25px;height:25px;background-color:#${color};float:right" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fmt:message key="forms.priority" />
                            </td>
                            <td>
                                <input class="required number" title="<fmt:message key="error.colorimetry.priority"/>" type="text" id="priority" name="priority" value="${priority}" />
                            </td>
                        </tr>

                    </table>
                </div>
                <div id="add"/>
                <div>
                    <input type="hidden" id="maxNumber" name="maxNumber" value="1" />
                </div>
                <div>
                </div>

                <input type="hidden" id="colId" name="colId" value="${id}" />

                <%@include file="menu/wizardTablessMidle.jsp" %>
                <%@include file="menu/wizardTablessFooter.jsp" %>
            </form>

        </body>
    </fmt:bundle>
</html>
